<template>
  <div class="main-container">
    <div class="main-container-body">
      <el-row style="text-align: right;">
        当前登录：
        <el-select v-model="global.username" size="mini" @change="switchUser">
          <el-option v-for="(value, index) in global.userList" :label="value" :value="value"></el-option>
        </el-select>
      </el-row>
      <el-container style="height: 100%" v-if="null != global.username">
        <el-aside style="width:250px">
          <el-menu class="el-menu-demo" mode="vertical" menu-trigger="click" :router="true">
            <template v-for="(item, index) in menus">
              <template v-if="item.children == null && !item.hidden">
                <el-menu-item :index="item.path" :class="isActive(item)">
                  {{item.meta.title}}
                </el-menu-item>
              </template>
              <template v-else-if="!item.hidden">
                <el-submenu :index="item.path">
                  <template slot="title">{{item.meta.title}}</template>
                  <template v-for="(item2, index2) in item.children">
                    <el-menu-item :index="item2.path" :class="isActive(item2)">
                      {{item2.meta.title}}
                    </el-menu-item>
                  </template>
                </el-submenu>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header class='bread-crumb'>
            {{this.$route.meta.title}}
          </el-header>
          <el-main>
            <router-view v-if="showRouter" />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
  import global from './global.js'
  import {
    menus,
    routes
  } from './routes.js'
  import access from './api/access.js'

  export default {
    name: 'App',
    data() {
      return {
        global: global,
        menus: menus,
        routes: routes,
        showRouter: true
      }
    },
    mounted() {
    },
    methods: {
      isActive: function(item) {
        return {
          'is-active': item.path == this.$route.path
        }
      },
      switchUser: function(value) {
        if (null == value) {
          return
        }
        this.global.username = value
        localStorage.setItem("username", value)
        this.$message.info('当前用户已切换至：' + value)
        this.reloadRouter()
      },
      reloadRouter() {
        this.showRouter = false
        this.$nextTick(() => {
          this.showRouter = true
        })
      }
    }
  }
</script>

<style>
  body {
    overflow-y: hidden;
    margin: 0;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .nav-head a {
    margin: 5px;
    text-decoration: none;
  }

  .el-menu-item.is-active {
    background-color: #C0C0C0 !important
  }

  .main-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .main-container-body {
    height: 100%;
  }

  .el-menu-demo {
    height: 100%;
  }

  .bread-crumb {
    background-color: silver;
    line-height: 60px;
    padding: 0px;
  }
</style>
